<template>
    <div class="main">
        <div class="body">
            <!-- 二级路由出口 -->
            <router-view></router-view>          
            
        </div>
        <div class="nav">
            <router-link to="/article">面经</router-link>
            <router-link to="/collect">收藏</router-link>
            <router-link to="like">喜欢</router-link>
            <router-link to="my">我的</router-link>
        </div>

    </div>
  
</template>

<script>
export default {
    name: 'MainPage'
}
</script>

<style scoped>
    .body{
        overflow: scroll;
        height: 675px;
    }
   .nav{
        width: 415px;
        height: 50px;
        background-color: #aaa;
    }
    .nav a{
        display: inline-block;
        width: 25%;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        color: #fff;
    }
    .nav a.router-link-active{
        background-color: #000;
    }
</style>